<template>
  <div class="main">
    <div style="width: 94%; margin: auto">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>付费Live</el-breadcrumb-item>
        <el-breadcrumb-item>创建付费Live</el-breadcrumb-item>
      </el-breadcrumb>
      <hr />
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="专辑主题" prop="huodongname">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="专辑简介" prop="zhuanji">
          <div style="margin: 20px 0"></div>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="2000"
            show-word-limit
          >
          </el-input>
        </el-form-item>
        <el-form-item label="专辑封面" prop="zhuanji">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
          >
            <i class="iconfont icon-B" style="font-size: 50px"></i>
            <div class="el-upload__text">请上传图片</div>
            <div class="el-upload__tip" slot="tip" style="margin: 0">
              <em>建议尺寸374*544,JPG、PNG格式,图片小于10M</em>
            </div>
          </el-upload>
        </el-form-item>
        <hr />
        <li v-for="(item, index) in list" :key="index">
          <div class="tigang">
            <div class="tigang_top">
              <div>
                <p>{{ item.tigang }}</p>
              </div>
              <div>
                <el-popover placement="top" width="160" v-model="visible">
                  <p>确认要删除这条信息吗？</p>
                  <p style="font-size: 12px; color: gray">
                    此信息一旦删除,将无法恢复
                  </p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible = falase"
                      >取消</el-button
                    >
                    <el-button type="primary" size="mini" @click="remove(index)"
                      >确定</el-button
                    >
                  </div>
                  <el-button slot="reference"
                    ><i class="el-icon-delete"></i
                  ></el-button>
                </el-popover>
              </div>
            </div>

            <div style="margin: 20px"></div>
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="formLabelAlign"
            >
              <el-form-item label="名称">
                <el-input v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="活动区域">
                <el-input v-model="item.time"></el-input>
              </el-form-item>
              <el-form-item label="活动形式">
                <el-input v-model="item.sum"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </li>
        <el-button
          style="width: 160px; margin-left: 100px"
          type="primary"
          @click="addzhuti()"
          >添加主题</el-button
        >
        <hr />
        <el-form-item label="课时定价">
          <input type="text" />T币
          <p style="margin: 0; color: #1cdaa4">
            每期Live直播结束后，付费Live的总价格会进行衰减,<a href="#"
              >衰减规则</a
            >
          </p>
        </el-form-item>
        <el-button
          style="width: 160px; margin-left: 100px"
          disabled
          type="primary"
          @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
 
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      textarea: "",
      textarea2: "",
      ruleForm: {
        name: "",
      },
      rules: {
        huodongname: [
          { required: true, message: "请输入专辑主题", trigger: "blur" },
        ],
        zhuanji: [
          { required: true, message: "请输入专辑简介", trigger: "blur" },
        ],
      },
      list: [
        {
          tigang: "编写提纲(1)",
          title: "主题一",
          time: "2020-6-8 14:52:30",
          sum: "17课时",
        },
        {
          tigang: "编写提纲(2)",
          title: "主题二",
          time: "2021-3-8 08:32:30",
          sum: "30课时",
        },
      ],
    };
  },
  methods: {
    remove(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style>
li {
  list-style: none;
}
.tigang_top {
  width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main {
  width: 100%;
  background-color: #fff;
}
.el-form-item {
  width: 600px;
}
</style>